<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        #root {
            width: 500px;
            margin: 200px auto;
            text-align: center;
        }

    </style>
</head>

<body>
    <div id="root">
        <form @submit.prevent='click'>
            <p>username:</p><input type="text" v-model.lazy='username' placeholder="请输入用户名" @input="console.log(username)">
            <p>password:</p><input type="password" v-model='password' placeholder="请输入密码"></br>
            <p>sex:</p>
            <p>male</p><input type="radio" name="sex" v-model='sex' value="male">
            <p>female</p><input type="radio" name="sex" v-model='sex' value="female"></br>
            <p>hobbies:</p>
            <p>smoke</p><input type="checkbox" v-model='hobbies' value="smoke">
            <p>drink</p><input type="checkbox" v-model='hobbies' value="drink">
            <p>eat</p><input type="checkbox" v-model='hobbies' value="eat"></br>
            <select v-model='address'>
                <option value="">please check</option>
                <option value="beijing">beijing</option>
                <option value="shanghai">shanghai</option>
                <option value="hongkong">hongkong</option>
            </select>
            <p>excess infomation</p><textarea v-model='others'></textarea>
            <button>submit</button>
        </form>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            el: '#root',
            data: {
                username: '',
                password: '',
                sex: 'male',
                hobbies: [],
                address: '',
                others: ''
            },
            computed: {},
            watch: {},
            methods: {
                click() {
                    console.log(JSON.stringify(this._data));
                    // console.log(JSON.stringify(this.info));
                    // 把数据写在一个对象里
                    // 只要数字， 且存储为整数型， v - model.number = ''  type='number'
                    // v-model.lazy在失去焦点的一瞬间再收集
                    // v-model.trim可以去掉前后空格
                }
            },
        })
    </script>
</body>

</html>
